<template>
  <div
    class="custom-detail"
    v-if="visibile"
    :style="{ left: width, width: `calc(100% - ${width})` }"
  >
    <template v-if="isComplexRef">
      <component
        @change="change"
        v-model:visibile="visibile"
        v-model:active="activePage"
        :preview="false"
        isUpdate
        detail
        :is="componentItem"
        :pageType="complexDataRef.pageType"
        :dataSource="complexDataRef.modelList"
        :buttons="complexDataRef.buttons"
        :record="modalParams.record"
        :moduleId="modalParams.moduleId"
        :parentModel="modalParams.parentModel"
      />
    </template>
    <component
      v-else
      :record="record"
      :is="componentItem"
      :allData="allData"
      @change="change"
      :modalParams="modalParams"
      :params="modalParams.params"
      :modelId="modalParams.modelId"
      :moduleId="modalParams.moduleId"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, markRaw, computed, unref } from 'vue';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';

  import { useComponent } from './useComponent';

  const emit = defineEmits(['register']);
  const { getSilderWidth } = useMenuSetting();
  const visibile = ref<boolean>(false);
  const record = ref<object>({});
  const allData = ref<object>({});
  const activePage = ref(0);

  let componentItem = ref<any>(null);
  const isComplexRef = ref(false);
  const complexDataRef = ref<Indexable>({});
  const modalParams = ref<Indexable>({});
  const width = computed(() => {
    return unref(getSilderWidth);
  });

  async function open(visibleItem: boolean, data) {
    console.log(
      '%cdata===>62： ',
      'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
      data,
    );

    visibile.value = visibleItem;
    record.value = data?.data;
    allData.value = data;
    const {
      moduleId,
      dataModelId,
      dynamicParams,
      record: rowRecord,
      params,
      title,
      parentModel,
    } = data.btnItem || {};

    modalParams.value = {
      moduleId,
      modelId: dataModelId,
      dynamicParams,
      preview: false,
      isUpdate: true,
      record: rowRecord,
      params,
      title,
      parentModel,
    };

    const { component, isComplex, complexData } = await useComponent(data.btnItem);
    componentItem.value = markRaw(component);
    isComplexRef.value = isComplex;
    complexDataRef.value = complexData || {};
  }
  const change = (data) => {
    visibile.value = data;
    if (!data) {
      componentItem.value = null;
    }
  };
  emit('register', open);
</script>

<style lang="less" scoped>
  .custom-detail {
    position: fixed;
    width: 100%;
    height: calc(100vh - 112px);
    left: 224px;
    top: 112px;
    // background: #fff;
    z-index: 999;
  }
</style>
